// 图标样式
.icon {
  display: flex;
  align-items: center;
  width: 60px;
  font-size: 12px;
  color: #999999;
  & > div {
    width: 16px;
    height: 16px;
    margin-right: 5px;
  }
}

header {
  ul {
    & > li:first-of-type > a {
      color: #fff;
    }
  }
}

.banner {
  position: relative;
  width: 1200px;
  height: 320px;
  margin: 40px auto;
  .dot {
    position: absolute;
    display: flex;
    bottom: 10px;
    width: 100%;
  }
}

// 上下内容通用样式
.main-top {
  & > div {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 1200px;
    height: 208px;
    margin: 0 auto 174px;
    h2 {
      font-size: 28px;
    }
    & > div {
      display: flex;
      justify-content: space-between;
      height: 152px;
      & > .main-item {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        & > img {
          width: 180px;
          height: 120px;
        }
        & > span {
          background-color: #fff;
          font-size: 16px;
        }
      }
    }
  }
}

main {
  width: 100%;
  background-color: #f7f8f9;
  .main-middle {
    width: 100%;
    padding: 40px 0;
    box-sizing: border-box;
    .main-content {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 1200px;
      height: 363px;
      margin: 0 auto;
      .main-content-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 20px;
        span {
          font-size: 20px;
        }
        & > div {
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 180px;
          .dot {
            & > div:first-of-type {
              background-color: #1088f2;
            }
          }
          a {
            font-size: 14px;
            color: #1088f2;
            white-space: nowrap;
          }
        }
      }

      .main-item {
        display: flex;
        justify-content: space-between;
        height: 320px;
        & > .main-content-item {
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          height: 100%;
          background-color: #fff;
          & > img {
            width: 285px;
            height: 190px;
          }
          .main-content-info {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            margin: auto;
            width: 259px;
            height: 65px;
            h4 {
              font-size: 14px;
            }
            p {
              color: #999999;
              font-size: 12px;
              span {
                color: #1088f2;
              }
            }
            & > div {
              display: flex;
              height: 16px;
              .eyes {
                @extend .icon;
                & > div {
                  background: url(../images/eye.png) no-repeat center/cover;
                }
              }
              .agree {
                @extend .icon;
                & > div {
                  background: url(../images/agree.png) no-repeat center/cover;
                }
              }
            }
          }

          .line {
            width: 259px;
            height: 1px;
            background-color: #eeeeee;
            margin: auto;
          }

          .user {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: auto;
            width: 259px;
            height: 24px;
            & > div {
              display: flex;
              align-items: center;
              font-size: 12px;
              & > div {
                width: 24px;
                height: 24px;
                margin-right: 5px;
                border-radius: 50%;
                background: url(../images/user.jpg) no-repeat center/cover;
              }
              span {
                white-space: nowrap;
                text-overflow: ellipsis;
              }
            }
            time {
              font-size: 12px;
              color: #999999;
            }
          }
        }
      }
    }
  }

  .main-bottom {
    @extend.main-top;
    & > div {
      height: 215px;
      margin: 0 auto 40px;
      span {
        width: 180px;
        height: 49px;
        text-align: center;
        line-height: 49px;
      }
    }
  }
}
